<!--  -->
<template>
  <div class="conditionItem">
    <el-row :gutter="10">
      <el-col :span="5">
        <el-select
            v-model="item.fieldName"
            clearable
            filterable
            allow-create
            default-first-option
            style="width: 100%"
            placeholder="字段"
        >
          <el-option
              v-for="(item, index) in fieldList"
              :key="index"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select
            v-model="item.type"
            style="width: 100%"
            placeholder="条件类型"
            clearable filterable
        >
          <el-option
              v-for="item in $attrs.typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <template
          v-if="isCommon(item.type) || isIn(item.type)"
      >
        <el-col :span="3" v-if="$attrs.hasOtherFrom">
          <el-select
              v-model="item.isFrom"
              style="width: 100%"
              placeholder="值来源"
              clearable filterable
          >
            <el-option
                v-for="item in fromList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="$attrs.hasOtherFrom ? 11 : 14">
          <el-cascader
              v-if="item.isFrom == '2'"
              v-model="item.from"
              style="width: 100%"
              placeholder="条件值组件"
              clearable
              :options="$attrs.paramsOptions.filter(item=>item.field!=3)"
              :props="{ value: 'field',expandTrigger:'hover' }"
          ></el-cascader>
          <template v-else>
            <el-input v-if="isCommon(item.type)" v-model="item.value" placeholder="条件值"></el-input>
            <code-editor
                v-if="isIn(item.type)"
                style="height:60px"
                mode="javascript"
                :value="item.in.values"
                @change="handleConfirm"
            ></code-editor>
          </template>
        </el-col>
      </template>
      <template v-else-if="isBetween(item.type)">
        <el-col :span="3">
          <el-select
              v-model="item.between.isStartFrom"
              style="width: 100%"
              placeholder="开始值来源"
              clearable filterable
          >
            <el-option
                v-for="item in fromList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-cascader
              v-if="item.between.isStartFrom == '2'"
              v-model="item.between.startFrom"
              style="width: 100%"
              placeholder="开始值组件"
              clearable
              :options="$attrs.paramsOptions"
              :props="{ value: 'field',expandTrigger:'hover' }"
          ></el-cascader>
          <el-input v-else v-model="item.between.from" placeholder="条件值"></el-input>
        </el-col>
        <el-col :span="3">
          <el-select
              v-model="item.between.isEndFrom"
              style="width: 100%"
              placeholder="结束值来源"
              clearable filterable
          >
            <el-option
                v-for="item in fromList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-cascader
              v-if="item.between.isEndFrom == '2'"
              v-model="item.between.endFrom"
              style="width: 100%"
              placeholder="结束值组件"
              clearable
              :options="$attrs.paramsOptions"
              :props="{ value: 'field',expandTrigger:'hover' }"
          ></el-cascader>
          <el-input v-else v-model="item.between.to" placeholder="条件值"></el-input>
        </el-col>
      </template>
      <template v-else-if="isNear(item.type)">
        <el-col :span="5">
          <LocationValue v-model="item.near.location"/>
        </el-col>
        <el-col :span="5">
          <el-input v-model="item.near.distance" placeholder="距离"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="item.near.units" placeholder="单位"></el-input>
        </el-col>
      </template>
      <template v-else-if="isTag(item.type)">
        <el-col :span="5">
          <TagsPopover v-model="item.tag.tags"/>
        </el-col>

      </template>
    </el-row>
  </div>
</template>

<script>
import {isCommon, isBetween, isIn, isNear, isTag, filterData} from "./utils.js"
// import CodeEditor from "../../CodeEditorCom"
import LocationValue from './location-value'
import TagsPopover from './tags-popover.vue'
import CodeEditor from "@/components/code-editor/index.vue";


export default {
  name: "ConditionItem",
  components: {
    CodeEditor,
    /*CodeEditor,*/ LocationValue, TagsPopover
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      fromList: [
        {
          label: "自定义",
          value: "1",
        },
        {
          label: "页面组件",
          value: "2",
        },
      ],
    };
  },
  computed: {
    fieldList() {
      let res = [];
      this.$attrs.fieldDefinitions.forEach((field) => {
        res.push({
          label: `${field.name}(${field.description})`,
          value: field.name,
        });
      });
      return res;
    },
  },
  watch: {},
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {
    isCommon,
    isBetween,
    isIn,
    isNear,
    isTag,
    init() {
      let keys = Object.keys(this.item)
      if (!keys.includes('between')) {
        this.item.between = filterData.between
      }
      if (!keys.includes('in')) {
        this.item.in = filterData.in
      }
      if (!keys.includes('near')) {
        this.item.near = filterData.near
      }
      if (!keys.includes('tag')) {
        this.item.tag = filterData.tag
      }
    },
    handleConfirm(value) {
      if (typeof value === "string") {
        this.item.values = Function(
            '"use strict";return (' + value + ")"
        )();
      } else {
        // console.log('handleConfirm', value)

        this.item.in.values = value
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.conditionItem {
  width: 100%;
  padding: 5px 0;
}
</style>
